<template>
	<view style="height: 100vh;background:#fff;">
		<!-- <cu-custom bgColor="bg-white" :isBack="true"><block slot="backText">登录</block><block slot="content"></block></cu-custom> -->
		<view class="full-container align-center">
			<view class="flex margin-top-xl padding-top">
				<image src="../../static/img/logo.png" style="width:200upx;height:200upx;" mode="aspectFit"></image>
			</view>
			<view class="padding-xl margin-top" style="width: 100%;">
				<view class="flex flex-direction margin-bottom" style="margin-bottom: 60upx;" v-show="izReferrer">
					<view class="flex align-center">
						<view class="title" style="width: 190rpx;color: #333333;font-weight:600;">推荐人昵称</view>
						<view class="radius" style="flex:1;padding:16rpx 40rpx;background-color: #F5F5F5;border-radius:12rpx;">
							<input style="color: #333;" disabled="disabled" placeholder="" v-model="shareU"/>
						</view>
					</view>
					<view class="flex align-center margin-top-sm">
						<view class="title" style="width: 190rpx;color: #333333;font-weight:600;">推荐人手机号</view>
						<view class="radius" style="flex:1;padding:16rpx 40rpx;background-color: #F5F5F5;border-radius:12rpx;">
							<input style="color: #333;" disabled="disabled" placeholder="" v-model="p_phone"/>
						</view>
					</view>
				</view>
				<view class="flex flex-direction margin-top">
					<button class="cu-btn lg loginBtn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<text class="text-df text-white">微信登录</text>
					</button>
				</view>
				<view class="text-cut margin-top padding-top text-df text-white" @tap="showModal" data-target="bottomModal" style="width: 100%;display: flex;text-align: center;justify-content: center;color:#999;">
					手机号登录/注册
				</view>
			</view>
			<view class="flex justify-center">
				<view style="position: absolute;bottom: 40rpx; z-index: 9999;">
					<text class="text-sm" style="color:#999999;">登录即表示您同意</text>
					<text class="text-sm" style="color: #0066FF;">《摩尔卡巴用户协议》</text>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action"></view>
						<view class="action" @tap="hideModal">
							<image src="../../static/close.png" style="width: 50rpx;height: 50rpx;" mode="aspectFill"></image>
						</view>
					</view>
					<view class="flex-column bg-white align-center">
						<view class="text-lg text-bold text-black">手机号登录</view>
						<view class="text-xs text-black margin-top-sm">如手机号没有未注册，验证后将自动注册</view>
					</view>
					<view class="padding-xl bg-white" style="padding-bottom: 130rpx;">
						<view class="flex-column">
							<view class="flex align-center" style="width: 100%;">
								<view class="title margin-right-sm" style="width:100rpx;color: #333333;font-weight:600;">手机号</view>
								<view class="radius" style="flex:1;padding:16rpx 40rpx;background-color: #F5F5F5;border-radius:12rpx; text-align: left;">
									<input style="color: #333;" placeholder="请输入手机号码" v-model="phone" type="number"/>
								</view>
							</view>
							<view class="flex align-center margin-top-xl" style="width: 100%;">
								<view class="title margin-right-sm" style="width:100rpx;color: #333333;font-weight:600;">验证码</view>
								<view class="radius" style="flex:1;padding:16rpx 40rpx;background-color: #F5F5F5;border-radius:12rpx; text-align: left;">
									<input style="color: #333;" placeholder="请输入验证码" v-model="sms_code"/>
								</view>
								<view class="radius text-white padding-sm margin-left-sm" :style="{background: !getCodeisWaiting?'#2B8AC6':'#ccc'}" @click.stop="getCode()">{{getCodeText}}</view>
							</view>
							<view class="flex flex-direction margin-top-xl" style="margin-top: 60rpx;">
								<button class="cu-btn lg bg-theme loginBtn" @tap="login()">
									<text class="text-sm text-white">确  认</text>
								</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	let Token = wx.getStorageSync('token');
	import * as User_API from '@/api/user.js'
	export default {
		data() {
			return {
				phone:"",
				p_phone:'',
				code:'',
				params:{},
				modalName: null,
				sms_code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false,
				ModalMsg:'',
				params:{},
				isCanUse: uni.getStorageSync('isCanUse')||true,
				userInfo: uni.getStorageSync('userInfo')||null,
				izReferrer:false,
				shareU:''
			}
		},
		onLoad() {
			if(!uni.getStorageSync('referrer')){
				this.izReferrer = false
			}else{
				this.izReferrer = true
			}
		},
		onShow(){
			let referrer = uni.getStorageSync('referrer')
			let shareU = uni.getStorageSync('shareUser').shareU
			if(referrer!=='' && referrer){
				this.p_phone = referrer
			}
			if(shareU!=='' && shareU){
				this.shareU = shareU
			}
		},
		methods: {
			getPhoneNumber (e) {
				if(e.detail.encryptedData){
					uni.getUserInfo({
					    provider: 'weixin',
					    success: (res)=> {
					        let nickName = res.userInfo.nickName; //昵称
					        let avatarUrl = res.userInfo.avatarUrl; //头像
							wx.login({
							  success:async(res)=>{
								let params = {
									encrypted_data:e.detail.encryptedData,
									uuid :'fsdjafld',
									iv:e.detail.iv,
									code: res.code,
									nick_name:nickName,
									face_url:avatarUrl,
									p_phone: this.p_phone
								}
								User_API.PhoneLogin(params).then(async res =>{
									if(res.id){
										await uni.setStorageSync('token',res.access_token);
										await uni.setStorageSync('userInfo',res);
										uni.showToast({
											icon:'success',
											title:'登录成功'
										})
										setTimeout(()=>{
											uni.showLoading({
												icon:'loading',
												title:''
											})
											this.GET_MemberRole()
											uni.navigateBack({
												delta: 1
											})
										},2000)
									}	
								}) 
							  }
							})
					    },
					    fail(res) {}
					})
				}
			},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				//示例用定时器模拟请求效果
				setTimeout(()=>{
					uni.showToast({title: '验证码已发送',icon:"none"});
					User_API.SendSMSCode(this.phone).then(res =>{
						this.sms_code = res.data
					})
					this.setTimer();
				},1000)
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
				},1000)
			},
			GET_MemberRole(){
				let shop_id = uni.getStorageSync('shop_id') || 2
				User_API.checkRole({shop_id:shop_id}).then(res =>{
					if(res.member_role_id){
						uni.setStorageSync('role',res)
					}
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			checkLoginData(){
				let {phone,sms_code,p_phone} = this
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))){
					uni.showToast({title: '请填写正确手机号码',icon:"none"})
					return false
				}
				if(!this.sms_code){
					uni.showToast({title: '请填写验证码',icon:"none"})
				}
				if(this.p_phone){
					if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.p_phone))){
						uni.showToast({title: '请填写正确推荐人手机号码',icon:"none"})
						return false
					}
				}
				return true
			},
			login(){
				if(this.checkLoginData()){
					uni.getUserInfo({
					    provider: 'weixin',
					    success: (res)=> {
					        let nickName = res.userInfo.nickName; //昵称
					        let avatarUrl = res.userInfo.avatarUrl; //头像
							wx.login({
							  success:async(res)=>{
								let params = {
									mobile : this.phone,
									sms_code : this.sms_code,
									p_phone: this.p_phone,
									code: res.code,
									nick_name:nickName,
									face_url:avatarUrl
								}
								User_API.Login(params).then(res=>{
									if(res.id){
										wx.setStorageSync('token',res.access_token);
										wx.setStorageSync('userInfo',res);
										uni.showToast({
											icon:'success',
											title:'登录成功'
										})
										setTimeout(()=>{
											// this.GET_MemberRole()
											uni.navigateBack({
												delta: 1
											})
										},3000)
									}
								})
							  }
							})
						}
					})
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
.full-container{
	width: 100%;
	display: flex;
	flex-direction: column;
}
.logo{
	border-radius: 100%;
	border: 80upx solid $color-main;
	position:relative;
	top:100upx;
}
.title{
	text-align: left;
}
.empty{
	  width: 100%;
	  height: 85vh;
	  display: flex;
	  justify-content: center;
	  align-cartList: center;
	  color: #666;
	  font-size: 28upx;
	  padding-bottom: 80upx;
}
.loginBtn{
		background-color: $color-main;
}
</style>
